

let token = localStorage.getItem('token')
let q = {
  sex: '',
  username:'',
  mobile:'',
  page: 1,
  limit: 10,
}
var id_user = []
var url_img;
// 获取列表
function getContent() {
  axios({
    method: '',
    url: 'http://124.223.14.236:8060/admin/ydd_user/list',
    params: q,
    headers:{
      "x-token":token
    },
  })
  .then(res =>{
    
  let arr = res.data.data.data.map(function(item,value){
   
    if (item.sex === 1){
      item.sex = "女"
    }else if (item.sex === null){
      item.sex = ""
    }else {
      item.sex = "男"
    }
    if(item.icon === null){
      item.icon = ""
    }
    if(item.birthday === null){
      item.birthday = ""
    }
    id_user = item.id
    return `
    <tr>
                        <td>${value + 1}</td>
                        <td>${item.id}</td>
                        <td>${item.username}</td>
                        <td>${item.mobile}</td>

                        <td>

                        <img src='${item.icon}' alt="">

                        </td>
                        
                        <td>${item.sex}</td>
                        <td>${item.birthday}</td>
                        <td style="text-align: center;" >
                        <form class="layui-form" action="" id="operate">
                        <div class="layui-form-item">
                          <div class="layui-input-block"  >
                            <button class="layui-btn" lay-submit lay-filter="formDemo " id="edit" data-id=${item.id}><i class="iconfont icon-bianji" ></i> </button>
                            <button type="reset" class="layui-btn layui-btn-primary " id="del" data-id=${item.id}><i class="iconfont icon-shanchu"></i></button>
                        </div>
                  </div>
                  </form>
                      </td>
                      </tr>`
  })
  
  $('tbody').html(arr.join(''))
    // 获取分页
 // 分页
 layui.use('laypage', function () {
  var laypage = layui.laypage
  //执行一个laypage实例
  laypage.render({
    elem: 'pages', //注意，这里的 pages 是 ID，不用加 # 号
    count: res.data.data.count, //数据总数，从服务端得到
    layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
    curr: q.page, // 代表当前页码
    limit: q.limit, // 代表每页显示多少条数据
    limits: [1, 2, 3, 8],
    jump: function(obj, first){  // 当第一次执行渲染分页时 执行jump 
      //obj包含了当前分页的所有参数，比如：
      console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
      console.log(obj.limit); //得到每页显示的条数
      // console.log(obj);
      //首次不执行
      if(first){  // 不设置first 就会死循环
        return
      }
      q.page = obj.curr
      q.limit = obj.limit
      getContent()
    }
  })
})
  })
  .catch(err =>{})


}
getContent()



  
// 删除
$('body').on('click','#del',function(e){
  let id = this.getAttribute('data-id')
  console.log(id);
  layer.open({
    offset: '100px',
    area: ['400px', '150px'],
    title: ''
    ,content: '确定删除吗,是否继续?',
    btn: ['确认', '取消'],
    yes: function(index, layero){
      //按钮【按钮一】的回调
      getDelete(id)
    }
    ,btn2: function(index, layero){
     layer.msg('取消删除')
    }
  });     
  
})

function getDelete(id) {
  axios({
    method: 'GET',
    url: 'http://124.223.14.236:8060/admin/ydd_user/del',
    headers:{
      "x-token":token
    },
    params: {
      id: id
    }
  })
  .then(res =>{
    console.log(res.data);
    if(res.data.errno !== 1000 && res.data.errmsg !== '系统默认数据,不允许删除' ){
     console.log(res);
    layer.close(layer.index)
    layer.msg('删除成功')
    getContent()
    }else {
      layer.msg('删除失败')
    }
 
  })
  .catch(err =>{})
}
let idd = null




// 编辑
$('body').on('click','#edit',function(e){
  e.preventDefault()
  idd = this.getAttribute('data-id')
  get(idd)
})

// 添加标签

$('.add_btn').on('click',function(){  
  get()
})


//  弹出层
function get(idd) {
  
  layer.open({
    offset: '100px',
    area: ['700px', '450px'],
    title: ''
    ,content: `<form class="layui-form" action="" id="edit_form">
    <div class="layui-form-item">
      <label class="layui-form-label">用户名</label>
      <div class="layui-input-block">
        <input type="text" name="title" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input" id="user_input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">手机号</label>
      <div class="layui-input-inline">
        <input type="text" name="text" required lay-verify="required" placeholder="请输入手机号" autocomplete="off" class="layui-input" id="phone_input">
      </div>

      <div class="layui-form-item" id="input_pwd">
      <label class="layui-form-label">密码</label>
      <div class="layui-input-inline">
        <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input" id="pwd_input">
      </div>


      <div class="layui-form-item >
      <label class="layui-form-label" ></label>
      <div class="layui-input-block switch" >
       <span class="boy">男</span> <input type="checkbox" name="switch" lay-skin="switch" value="1" id='checkbox' lay-filter="test"> <span class="girl">女</span>
      </div>
    </div>
    <input type="file" style="display:none" id="input_file">
    <button type="button" class="layui-btn" id="uploading">上传头像</button>
  </form>`,
    btn: ['确认', '取消'],
    yes: function(index, layero){
      //按钮【按钮一】的回调
      let username = $('#user_input').val()
      let password = $('#pwd_input').val()
      let mobile = $('#phone_input').val()
      let sex = sex1
      let id1 = idd
      let icon = url_img
      if($('#edit').click){
       getEdit(username,password,mobile,sex,id1,icon)
      }
      getAdd(username,password,mobile,sex,icon)
    }
    ,btn2: function(index, layero){
     layer.msg('取消编辑')
    }
  });     
  var sex1 = '' ;
  // 渲染开关
  var form = layui.form;
  // 一般当表单存在动态生成时，进行渲染
  form.render();  
  // 获取开关状态
  form.on('switch(test)', function(data){
    // console.log(data.elem); //得到checkbox原始DOM对象
    // console.log(data.elem.checked); //开关是否开启，true或者false
    // console.log(data.value); //开关value值，也可以通过data.elem.value得到
    // console.log(data.othis); //得到美化后的DOM对象
    if(data.elem.checked === true){
      $('.girl').css('color','blue')
      $('.boy').css('color','')
      sex1 = '女'
    }else {
      $('.boy').css('color','blue')
      $('.girl').css('color','')
      sex1 = '男'

    }
});
// 上传图片
$('#uploading').on('click',function(){
  $('#input_file').click()
})

// 获取图片url
$('#input_file').on('change',function(){
  let img = URL.createObjectURL(this.files[0])
  url_img = img
})
}

layui.use('table', function(){
  var table = layui.table;
  
  table.render({
    elem: '#test'
    ,url:'/static/json/table/demo3.json'
    ,toolbar: true
    ,title: '用户数据表'
    ,totalRow: true
    ,cols: [[
      {field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计行'}
      ,{field:'username', title:'用户名', width:120, edit: 'text'}
      ,{field:'email', title:'邮箱', width:150, edit: 'text'}
      ,{field:'experience', title:'积分', width:100, sort: true, totalRow: true}
      ,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
      ,{field:'logins', title:'登入次数', width:100, sort: true, totalRow: true}
      ,{field:'sign', title:'签名'}
      ,{field:'city', title:'城市', width:100}
      ,{field:'ip', title:'IP', width:120}
      ,{field:'joinTime', title:'加入时间', width:120}
    ]]
    ,page: true
    ,response: {
      statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
    }
    ,parseData: function(res){ //将原始数据解析成 table 组件所规定的数据
      return {
        "code": res.status, //解析接口状态
        "msg": res.message, //解析提示文本
        "count": res.total, //解析数据长度
        "data": res.rows.item //解析数据列表
      };
    }
  });
});

// 编辑
function getEdit(username,password,mobile,sex,id1,icon) {
  axios({
    method: 'POST',
    url: 'http://124.223.14.236:8060/admin/ydd_user/update',
    headers:{
      "x-token":token
    },
    data: {
      id: id1,
      username: username,
      sex: sex,
      password: password,
      mobile: mobile,
      icon: icon
    }
  })
  .then(res =>{
     console.log(res);
    layer.close(layer.index)
    layer.msg('编辑成功')
    getContent()
   
 
  })
  .catch(err =>{})
}


//添加
function getAdd(username,password,mobile,sex,icon) {
  axios({
    method: 'POST',
    url: 'http://124.223.14.236:8060/admin/ydd_user/add',
    headers:{
      "x-token":token
    },
    data: {
      username: username,
      sex: sex,
      password: password,
      mobile: mobile,
      icon: icon
    }
  })
  .then(res =>{
     console.log(res);
    layer.close(layer.index)
    layer.msg('添加成功')
    getContent()
   
 
  })
  .catch(err =>{})
}
































// 刷新
$('#flush').on('click',function(){
  location.reload() 
})
// 重置
$('#reset').on('click',function(){
  $('#filtrate_input').val('')
  $('#filtrate_phone').val('')
  $('#filtrate_sex').val('')
  q.username = ''
  q.mobile = ''
  q.sex = ''
  getContent()
})

// 鼠标悬停
document.querySelector('#flush').addEventListener('mouseover',function(){
  document.querySelector('.alert1').style.opacity = '1'
})
document.querySelector('#flush').addEventListener('mouseout',function(){
  document.querySelector('.alert1').style.opacity = '0'
})
// 鼠标悬停2
document.querySelector('#close').addEventListener('mouseover',function(){
  document.querySelector('.alert').style.opacity = '1'
})
document.querySelector('#close').addEventListener('mouseout',function(){
  document.querySelector('.alert').style.opacity = '0'
})
// 点击隐藏 显示
document.querySelector('#close').addEventListener('click',function(){
  
  if(document.querySelector('.top').style.display === 'none') {
    document.querySelector('.top').style.display = 'block'
  }else {
    document.querySelector('.top').style.display = 'none'
    document.querySelector('.alert').innerHTML = `打开搜索区
    <i class="layui-icon layui-icon-triangle-d"></i>`
    document.querySelector('.one_right_btn').innerHTML = `<i class="iconfont icon-xiangxia"></i>`
  

  }
})



$('#search').on('click',function(){
  // alert(1)
  q.username = $('#filtrate_input').val()
  q.mobile = $('#filtrate_phone').val()
  q.sex = $('#filtrate_sex').val()
  getContent()
  console.log(id_user);
})





    

// $('.exprot_btn').on('click',function(){
//   axios({
//     method: 'GET',
//     url: 'http://124.223.14.236:8060/admin/ydd_user/rowInfo',
//     headers:{
//       "x-token":token
//     },
//     params: {
//      id: id_user
//     }
//   })
//   .then(res =>{
//      console.log(res.data.data);
//      let data = res.data.data
//      layui.use(['table', 'layer'], function () {
//       var table = layui.table;
//       //导出表格配置
//       table.render({
//           elem: '#table',
//           id: 'exportTable',
//           title: '导出的文件名',
//           cols: [[ //表头
//               {
//                   field: '用户ID',
//                   title:  res.data.data.id,
//               }, {
//                   field: '用户名',
//                   title:  res.data.data.username,
//               }
//           ]]
//       })
//     })
//     table.exportFile('exportTable', data, 'xls');
//   })
//   .catch(err =>{})
// })

